<!DOCTYPE html>
<html>
  <head>
    <meta content="noindex,nofollow" name="robots">
    <meta charset="utf-8">
    <title>Formtastic</title>

    <link href="/formtastic.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]><link href="/formtastic_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="/formtastic_ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

    <style>
      body {
        font-family: helvetica, arial;
        font-size: 12px;
      }
    </style>
  </head>
</html>
<body>
  <h1>Formtastic</h1>

  <form action="basic_inputs.html" class="formtastic gem" id="new_gem" method="get">
    <fieldset class="inputs">
      <ol>
        <li class="input string stringish optional" id="gem_summary_input">
          <label class="label" for="gem_summary">Summary</label>
          <input id="gem_summary" name="gem[summary]" type="text" value="A Rails form builder plugin/gem with semantically rich and accessible markup" maxlength="255">
        </li>

        <li class="input text optional" id="gem_description_input">
          <label class="label" for="gem_description">Description</label>
          <textarea id="gem_description" rows="5">A Rails form builder plugin/gem with semantically rich and accessible markup</textarea>
        </li>

        <li class="input url stringish optional" id="gem_url_input">
          <label class="label" for="gem_url">URL</label>
          <input id="gem_url" name="gem[url]" type="url">
          <p class="inline-hints">Example: https://github.com/formtastic/formtastic</p>
        </li>

        <li class="input password stringish required" id="gem_password_input">
          <label class="label" for="gem_password">Password<abbr title="required">*</abbr></label>
          <input id="gem_password" name="gem[password]" type="password">
          <p class="inline-errors">can't be blank</p>
        </li>

        <li class="input password stringish required" id="gem_password_input">
          <label class="label" for="gem_password_confirmation">Password confirmation<abbr title="required">*</abbr></label>
          <input id="gem_password_confirmation" name="gem[password_confirmation]" type="password">
          <p class="inline-errors">can't be blank</p>
        </li>

        <li class="input numeric stringish optional" id="gem_downloads_input">
          <label class="label" for="gem_downloads">Downloads</label>
          <input id="gem_downloads" name="gem[downloads]" type="numeric" value="209,354">
        </li>

        <li class="input file optional" id="gem_file_input">
          <label class="label" for="gem_file">File</label>
          <input id="gem_file" name="gem[file]" type="file" value="value">
        </li>

        <li class="input email stringish optional" id="gem_email_input">
          <label class="label" for="gem_email">Email</label>
          <input id="gem_email" name="gem[email]" type="email">
        </li>

        <li class="input phone stringish optional" id="gem_phone_input">
          <label class="label" for="gem_phone">Phone</label>
          <input id="gem_phone" name="gem[phone]" type="phone">
        </li>

        <li class="input search stringish optional" id="gem_search_input">
          <label class="label" for="gem_search">Search</label>
          <input id="gem_search" name="gem[search]" type="search">
        </li>

        <li class="input date optional">
          <fieldset class="fragments">
            <legend class="label"><label>First release</label></legend>
            <ol class="fragments-group">
              <li class="fragment">
                <label>Year</label>
                <select id="gem_first_release_1i" name="gem[first_release][1i]">
                  <option>2009</option>
                </select>
              </li>
              <li class="fragment">
                <label>Month</label>
                <select id="gem_first_release_2i" name="gem[first_release][2i]">
                  <option>October</option>
                </select>
              </li>
              <li class="fragment">
                <label>Day</label>
                <select id="gem_first_release_3i" name="gem[first_release][3i]">
                  <option>15</option>
                </select>
              </li>
            </ol>
          </fieldset>
        </li>
        
        <li class="input date_picker optional">
          <label class="label" for="gem_expiry">Expiry date</label>
          <input id="gem_expiry" name="gem[gem_expiry]" type="date" size="10" maxlength="10" min="2012-01-01" max="2012-12-31" step="1" value="2012-01-01">
        </li>
        
        <li class="input datetime_picker optional">
          <label class="label" for="gem_expiry">Expiry datetime-local</label>
          <input id="gem_expiry" name="gem[gem_expiry]" type="datetime-local" size="16" maxlength="16" min="2012-01-01T00:00" max="2012-12-31T23:59" step="1800">
        </li>
        
        <li class="input datetime_picker optional">
          <label class="label" for="gem_expiry">Expiry datetime</label>
          <input id="gem_expiry" name="gem[gem_expiry]" type="datetime" size="16" maxlength="16" min="2012-01-01T00:00" max="2012-12-31T23:59" step="1800">
        </li>
        
        <li class="input time_picker optional">
          <label class="label" for="gem_expiry">Expiry time</label>
          <input id="gem_expiry" name="gem[gem_expiry]" type="time" size="5" maxlength="5" min="T00:00" max="23:59" step="60">
        </li>
        
        <li class="input string stringish optional autofocus" id="gem_autofocus_input">
          <label class="label" for="gem_autofocus">Autofocus</label>
          <input id="gem_autofocus" name="gem[autofocus]" type="text" value="The focus is set to this field" autofocus="autofocus">
        </li>

        <li class="input boolean optional" id="gem_terms_and_conditions_input">
          <label for="gem_terms_and_conditions">
            <input id="gem_terms_and_conditions" name="gem[terms_and_conditions]" type="checkbox" value="1" checked="checked">
            I agree to your draconian terms of service even though I didn't read them
          </label>
        </li>
        
        <li class="input select optional" id="gem_awesomeness_input">
          <label class="label" for="gem_awesomeness">Select</label>
          <select id="gem_awesomeness" name="gem[awesomeness]">
            <option value="5">First choice</option>
            <option value="4">Second choice</option>
          </select>
        </li>

        <li class="input radio optional">
          <fieldset class="choices">
            <legend class="label"><label>Rate</label></legend>
            <ol class="choices-group">
              <li class="choice">
                <label><input id="gem_rate_five" name="gem[rate]" type="radio" checked="checked"> Five</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_rate_four" name="gem[rate]" type="radio"> Four</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_rate_three" name="gem[rate]" type="radio"> Three</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_rate_two" name="gem[rate]" type="radio"> Two</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_rate_one" name="gem[rate]" type="radio"> One</label></label>
              </li>
            </ol>
          </fieldset>
        </li>

        <li class="input check_boxes optional">
          <fieldset class="choices">
            <legend class="label"><label>Browsers</label></legend>
            <ol class="choices-group">
              <li class="choice">
                <label><input id="gem_browser_google_chrome" name="gem[browser][]" type="checkbox"> Google Chrome</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_browser_apple_safari" name="gem[browser][]" type="checkbox"> Apple Safari</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_browser_mozilla_firefox" name="gem[browser][]" type="checkbox"> Mozilla Firefox</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_browser_opera" name="gem[browser][]" type="checkbox"> Opera</label></label>
              </li>
              <li class="choice">
                <label><input id="gem_browser_internet_explorer" name="gem[browser][]" type="checkbox"> Internet Explorer (Although you really can't call it a browser can you? This is some long text to force wrapping.)</label></label>
              </li>
            </ol>
          </fieldset>
        </li>
      </ol>
    </fieldset>

    <fieldset class="buttons">
      <ol>
        <li class="button commit">
          <input class="create" id="gem_submit" type="submit">
        </li>
      </ol>
    </fieldset>

    <fieldset class="actions">
      <ol>
        <li class="action input_action">
          <input id="gem_submit" type="submit" value="Create Thing">
        </li>
      </ol>
    </fieldset>

    <fieldset class="actions">
      <ol>
        <li class="action button_action">
          <button id="gem_submit" type="submit">Create Thing</button>
        </li>
        <li class="action button_action">
          <button id="gem_submit" type="reset">Reset</button>
        </li>
        <li class="action link_action">
          <a href="#">Cancel</a>
        </li>
      </ol>
    </fieldset>
  </form>
</body>
</html>
